<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>解析Excel</title>
    <!-- jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/sockjs.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/stomp.min.js}"></script>
    <!--<script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
</head>

<body>
<div>
    <div class="layui-col-md10">
        <div class="layui-card">
            <div class="layui-card-header">
                消息体
            </div>
            <!--<div class="layui-card-header">
                <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传Excel
                </button>
            </div>-->
            <div class="layui-card-body" id="msg" style="max-height: 300px;height:300px;overflow:auto">
            </div>
        </div>
    </div>
</div>

</body>
<script>
    var stompClient = null;//定义全局变量，代表一个session
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        connect();
    });

    function connect() {	//定义连接函数
        if (stompClient == null || !stompClient.connected) {
            var url = 'http://127.0.0.1:8080/websocket';
            //var url = '/websocket';//或是这个简写也可以
            var headers = {
                "Authorization": "Bearer system"
            };
            var sockJS = new SockJS(url);
            stompClient = Stomp.over(sockJS);
            stompClient.heartbeat.outgoing = 20000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
            stompClient.heartbeat.incoming = 0; //客户端不从服务端接收心跳包
            console.log("当前处于断开状态,尝试连接");
            stompClient.connect(headers, connectCallback, errorCallback);
        } else {
            console.log("当前处于连接状态");
        }
    }

    //连接成功时的回调函数
    function connectCallback(frame) {
        stompClient.subscribe("/topic/hello", function (result) {
            //console.log(result);
            $("#msg").append($('<div style="color:red"><span>订阅/topic/hello的消息返回值：</span></div>').append(result.body));
        });
        stompClient.subscribe("/topic/hello2", function (result) {
            //console.log(result);
            $("#msg").append($('<div style="color:red"><span>订阅/topic/hello2的消息返回值：</span></div>').append(result.body));
        });
        //客户端向服务端发送消息，不会直接接收到返回值，要通过订阅hello或@SendTo("/topic/hello2")接收返回值
        stompClient.send("/app/hello",
            {},
            JSON.stringify({sender: "user123", type: 'JOIN', content: '消息内容'})
        );
        //客户端向服务端订阅频道，在不配置@SendTo("/topic/hello2")前提下直接可接收到返回值，如果配置了就接收不到了，要去订阅方法里接收返回值
        stompClient.subscribe('/app/subscribe', function (result) {
            //console.log(result);
            $("#msg").append($('<div style="color:blue"><span>订阅/app/subscribe的消息返回值：</span></div>').append(result.body));
        });
        //订阅一对一
        stompClient.subscribe('/user/queue/test', function (result) {
            //console.log(result);
            $("#msg").append($('<div style="color:orange"><span>订阅/user/queue/test的消息返回值：</span></div>').append(result.body));
        });
        //向Test发送消息
        stompClient.send("/app/sayToTest",
            {},
            JSON.stringify({sender: "user123", type: 'JOIN', content: '消息内容'})
        );
        /*//订阅公共频道
        stompClient.subscribe("/topic/public1", function (result) {
            console.log(result);
            $("#msg").append($('<div style="color:red"></div>').text(result.body));
        });
        //订阅一对一
        stompClient.subscribe('/user/userId123/msg', function (result) {
            console.log(result);
            $("#msg").append($('<div style="color:blue"></div>').text(result.body));
        });
        //订阅一对一
        stompClient.subscribe('/user/queue/test', function (result) {
            console.log(result);
            $("#msg").append($('<div style="color:orange"></div>').text(result.body));
        });
        //订阅一对一
        stompClient.subscribe('/app/init', function (result) {
            console.log(result);
            $("#msg").append($('<div style="color:blue"></div>').text(result.body));
        });
        //客户端向服务端发送消息
        stompClient.send("/app/receiveClientMsg",
            {},
            JSON.stringify({sender: "user123", type: 'JOIN',content:'消息内容'})
        )
        //订阅send方法（/app/receiveClientMsg）的返回值
        stompClient.subscribe('/topic/receiveClientMsg', function (result) {
            console.log(result);
            $("#msg").append($('<div style="color:red"></div>').text(result.body));
        });*/
    }

    function errorCallback() {//连接失败时的回调函数，此函数重新调用连接方法，形成循环，直到连接成功
        connect();
    }
</script>
</html>